<template>
  <div>
    <div
      class="chart-wrapper"
      ref="chartBox"
      v-show="chartData.length > 0"
      :style="{ width: wWidth + 'px' }"
      style="height: 400px"
    ></div>
    <el-empty
      description="暂无数据"
      v-show="chartData.length == 0"
      :image-size="60"
    />
  </div>
</template>

<script setup>
import { onBeforeUnmount, onMounted, ref, watch, nextTick } from "vue";
import * as echarts from "echarts";
import { debounce, nowSize } from "@/utils/util.js";
import { ElLoading, ElMessage } from "element-plus";
import screenfull from "screenfull";
const hHeight = ref(0);
const wWidth = ref(0);
const isFullscreen = ref(false);

const chartBox = ref();
let myChart = ref(null);

// 传入数据
const props = defineProps({
  chartData: {
    type: Array,
    default: [],
  },
  keyList: Array, // 显示值的参数
  xAxisName: String, // 横坐标名称
  markValue: {
    type: [Number, String],
    default: 0,
  },
  markValue2: {
    type: [Number, String],
    default: 0,
  },
  option: Object,
  chartType: {
    type: Array,
    default: [{ type: "bar", name: "value" }],
  }, // 显示几个图
  orient: {
    type: String,
    default: "horizontal",
  },
  title: {
    type: String,
    default: "",
  },
  linerColor: {
    type: [String, Array],
    default: ["#11100e", "#11100e"],
  },
  unit: {
    type: Array,
    default: ["件", "元"],
  },
  twoYAxis: Boolean,
});

const resizeHandler = debounce(() => {
  if (myChart) {
    myChart.resize();
  }
}, 200);

onMounted(() => {
  setTimeout(() => {
    if (props.chartData.length == 0) return;
    getChartData();
  }, 1000);
  isFullscreenFn();
  window.addEventListener("resize", resizeHandler);
  window.addEventListener("resize", isFullscreenFn);
  nextTick(() => {
    hHeight.value = document.documentElement.clientHeight - 820;
    wWidth.value = document.documentElement.clientWidth - 235;
  });
});

onBeforeUnmount(() => {
  window.removeEventListener("resize", resizeHandler);
  window.removeEventListener("resize", isFullscreenFn);
});

watch(
  () => props.chartData,
  (newVal, oldVal) => {
    getChartData();
  }
);
watch(
  () => props.markValue,
  (newVal, oldVal) => {
    getChartData();
  }
);
watch(
  () => props.markValue2,
  (newVal, oldVal) => {
    getChartData();
  }
);
watch(
  () => props.chartType,
  (newVal, oldVal) => {
    console.log(newVal);
    getChartData();
  },
  { deep: true }
);

const isFullscreenFn = () => {
  // 利用屏幕分辨率和window对象的内高度来判断兼容IE
  let winFlag = window.innerHeight === window.screen.height;
  // 利用window全屏标识来判断 -- IE无效
  let isFull = window.fullScreen || document.webkitIsFullScreen;

  if (isFull === undefined) {
    isFullscreen.value = winFlag;
  } else {
    isFullscreen.value = winFlag || isFull;
  }
  // console.log('1111111', winFlag);  // true全屏   false不是全屏
};

const getChartData = () => {
  let seriesData = [];
  let xAxisList = [];
  let legendList = [];
  props.chartData.forEach((t, v) => {
    if (
      t.date !== "平均值" &&
      t.date !== "最大值" &&
      t.date !== "最小值" &&
      t.date !== "累计值" &&
      t.date !== "去除率(%)" &&
      t.date !== "去除量" &&
      t.date !== "年去除量"
    ) {
      xAxisList.push(t[props.xAxisName]);
    }
  });
  console.log(
    "xAxisList",
    props.chartType,
    xAxisList,
    props.markValue,
    props.markValue > 0
  );
  props.chartType.forEach((item, index) => {
    legendList.push(item.name);
    let itemDate = [];
    props.chartData.forEach(function (t, v) {
      let itemValue = t[item.code];
      console.log(
        itemValue,
        itemValue + "",
        (itemValue + "").indexOf("＜") > -1
      );
      if ((itemValue + "").indexOf("＜") > -1) {
        let formatValue = ((itemValue + "").replace("＜", "") * 10) / 20;
        itemDate.push(formatValue);
      } else {
        itemDate.push(t[item.code]);
      }
    });
    seriesData.push({
      name: item.name,
      type: item.type,
      smooth: true,
      data: itemDate,
      // showSymbol: false,
      symbol: "emptyCircle",
      symbolSize: 4,
      avoidLabelOverlap: true,
      barWidth: 15, //柱图宽度
      // label: {
      //     show: true,
      //     position: "top",
      //     color: '#606266',
      //     fontSize: 12
      // },
      markLine: {
        silent: true,
        symbol: ["none", "none"], // none为标线两端的样式为无，可更改
        lineStyle: {
          // color: '#01fef9' // 这儿设置安全基线颜色
          color: "#ee114f",
        },
        data: [
          {
            yAxis: props.markValue,
          },
          {
            yAxis: props.markValue2,
          },
        ],
        label: {
          show: false,
          fontSize: nowSize(12),
          color: "#ee114f",
          padding: [6, 13, 16, 0],
        },
      },
      itemStyle: {
        color: {
          type: "linear",
          x: 0,
          y: props.orient === "horizontal" ? 1 : 0,
          x2: props.orient === "horizontal" ? 0 : 1,
          y2: 0,
          colorStops: [
            {
              offset: 0,
              color: item.linerColor ? item.linerColor[0] : props.linerColor[0],
            },
            {
              offset: 1,
              color: item.linerColor ? item.linerColor[1] : props.linerColor[1],
            },
          ],
          global: false,
        },
        borderRadius: 3,
      },
    });
  });

  nextTick(() => {
    initEcharts(legendList, xAxisList, seriesData);
  });
};

const initEcharts = (legendList, xAxisList, seriesData) => {
  myChart = echarts.init(chartBox.value);
  resizeHandler();
  let option = {
    title: {
      left: "center",
      text: props.title,
    },
    grid: {
      top: "16%",
      left: "4%",
      right: "4%",
      bottom: "14%",
      containLabel: true,
    },
    tooltip: {
      trigger: "axis",
    },
    legend: {
      bottom: "1%",
      data: legendList,
      icon: "circle",
      itemWidth: 10,
      itemHeight: 10,
      textStyle: {
        color: "#606266",
        fontSize: 12,
      },
    },
    xAxis: {
      type: "category",
      data: xAxisList,
      boundaryGap: false,
      axisLabel: {
        show: true,
        color: "#606266",
        fontSize: 12,
        fontWeight: "bold",
      },
      axisLine: {
        lineStyle: {
          color: "#dbdfe3",
        },
      },
    },
    yAxis: [
      {
        type: "value",
        // name: props.unit[0],
        max: function (value) {
          if (props.chartType[0].code.indexOf("ph") > -1) {
            return 14;
          }
        },
        nameTextStyle: {
          color: "#606266",
          fontSize: 12,
          fontWeight: "bold",
          padding: [0, 0, 0, 50],
        },
        splitLine: {
          lineStyle: {
            width: 1,
            type: "dashed",
          },
        },
        axisLabel: {
          show: true,
          margin: 20,
          color: "#606266",
          fontSize: 12,
          fontWeight: "bold",
        },
      },
    ],
    series: seriesData,
  };
  if (props.option) {
    option = Object.assign(option, props.option);
  }
  myChart.off("click");
  // myChart.on("click", function (params) {
  //     that.$emit("clickEchartIns", params); // 所选参数
  // });
  console.log(option);
  myChart.setOption(option, true);
};
</script>

<style scoped lang="less"></style>
